// 汇报的列表
<template>
    <div class="reportTable">
        <!-- 任务信息 -->
        <div style="background:#fff;">
            <div class="tip">
                <div class = "tipLeft"></div>
                <div class = "tipTitle" v-text = "'汇报情况'"></div>
                <el-button size="mini" type = "text" class = "tipButton">下载全部</el-button>
            </div>
            <div class = "content">
                <tableComponent ref= "tableComponent" :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" />
            </div>
            <div class="pagination_wrap">
                <el-pagination
                    background
                    @size-change = "handleSizeChange"
                    @current-change = "handleCurrentChange"
                    :page-sizes = "paginationPageSizes"
                    layout = "total, prev, pager, next, sizes,jumper"
                    :current-page.sync = "paginationParam.currentPage"
                    :page-size = "paginationParam.pageSize"
                    :total = "paginationParam.total"
                    style = "font-weight:400;"
                ></el-pagination>
		    </div>
        </div>
    </div>
</template>
<script>
import PreviewVue from '../../../../components/preview/Preview.vue'
import Urging from "../../../../components/Popup/Urging.vue";
export default {
    components: {
        Urging,
        tableComponent : () => import('../../comonComponent/table'),
    },
    props: ['id'],
    data() {
        return {
            tableData: [],
            //表格数据
            tableLabel: [
                { type : 'index',label : '序号', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
                { prop : 'orgName', label : '公司/部门', minWidth: '300', fixed : false, render : false, align : 'center'},
                { prop : 'name', label : '整改报告名称', minWidth: '360 ', fixed : false, render : false, align : 'center'},
                { prop : 'timeout', label : '是否超时', minWidth: '190 ', fixed : false, render : false, align : 'center',
                    render: (h, params, data) => {
                        return h('span', { attrs : { style: 'color :' + (params.row.timeout === '1' ? 'red' : '') }}, (params.row.timeout === '0' ? '否' : params.row.timeout === '1' ? '是' : ''))
                }},
                { prop : 'createdTime', label : '汇报时间', minWidth: '320', fixed : false, render : false, align : 'center'},
                { prop : 'action', label : '操作', minWidth: '250', fixed : false, option: [],align : 'center',
                    render : (h, params, data) => { 
                        return h( 'span', {}, [ 
                            h( "el-button", {style:{marginRight:'20px'}, class:'', props:{ size: 'mini' }, on : {
                                click : () => {
                                    this.$router.push({ path: '/index/SuperviseAndReport/Notification/DetailContaner', query: {id: params.row.id, role: 'manage', comeFrom: 'DetailReportTable'}})
                                }
                            } }, '查看' ), 
                            h( "Urging", {style:{display:'inline-block',marginRight:'20px'}, class:'',
                            props:{ type: 'warning', size: 'mini', clearOne: this.urg ,id: params.row.id}, on : {
                                click : () => {
                                    this.urg(params)
                                }
                            } }, '催办'),
                            h( "el-button", { class:'', props:{ type: 'primary', size: 'mini' }, on : {
                                click : () => {
                                    this.download(params)
                                }
                            } }, '下载')
                        ])
                    } 
                }

            ],
            tableOption : {
                loading: false,
                stripe: false,
                highlightCurrentRow : false,
                border : true,
                height : '610',
                maxHeight : '',
                resizable: false,
                headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
                cellStyle: {height: '50px', padding: 0 }
            },
            // 分页配置参数
            paginationPageSizes: [10, 30, 50],
            paginationParam: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },
        }
    },
    computed: {
        permissionBycode(){
            return this.$store.getters['PortalManagement/getPermissionBycode'](this.code)
        },
    },
    mounted () {
        this.getNotificationReportPage(this.id)
    },
    methods: {
        // 情况通报汇报分页列表
        getNotificationReportPage(id) {
            this.tableOption.loading = true
            let data = {
                id: id,
                pageNum: this.paginationParam.pageNum,
                pageSize: this.paginationParam.pageSize
            }
            this.Api.getNotificationReportPage(data).then(res => {
                if (res && res.code === '0') {
                    this.tableData = res.data.records
                    this.paginationParam.total = res.data.total
                } else {
                    this.$message.warning(res.message)
                }
                this.tableOption.loading = false
            })
        },
        // 分页pageSize 改变触发事件 
        handleSizeChange(val) {
            this.paginationParam.pageSize = val
            this.getNotificationReportPage(this.id)
        },
        // 分页currentPage 改变触发事件
        handleCurrentChange(val) {
            this.paginationParam.pageNum = val
            this.getNotificationReportPage(this.id)
        }, 
        urg(data) {
            console.log(data)
            this.Api.doNotificationManageReportUrging({ids:[{id:data.toString()}]}).then(res => {
                if(res && res.code === '0') {
                    this.$message.success('催办成功')
                } else {
                    this.$message.warning(res.message)
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
    .reportTable{
        margin-top:20px;
        margin-bottom:20px;
        .tip {
            display: flex;
            padding: 20px;
            align-items: center;
            .tipLeft {
                width: 4px;
                height: 14px;
                background: #3D7fff;
                margin-right: 10px;
            }
            .tipTitle {
                font-weight: 600;
                color: #333333;
                font-size: 16px;
                line-height: 16px;
                flex: 1;
            }
            .tipButton {
                border: 1px solid #3D7FFF;
                color: #3D7FFF;
                width: 70px;
                height: 30px;
                font-weight: 500;
                border-radius: 4px;
            }
        }
        .content{
            margin: 0 auto;
            padding: 4px 20px 24px 20px;
            .title {
               text-align: center;
               font-size: 22px;
               font-weight: 500;
               color: #333;
               font-family: PingFangSC-Medium, PingFang SC;
               line-height: 30px;
            }
            .subTitle {
                text-align: center;
                color: #999;
                font-weight: 400;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                line-height: 22px;
                padding:24px 0 46px 0;
            }
            .contentHtml {
                font-size: 16px;
                font-weight: 400;
                color: #333;
                line-height: 32px;
            }
        }
        .pagination_wrap {
			display: flex;
			justify-content: flex-end;
			bottom: 0;
			right: 0;
			/deep/ .el-pagination {
			margin-top: 0;
			padding:20px;
			line-height: normal;
			}
		}
    }
</style>